<template>
    <div>
      <!-- 面包屑导航 -->
      <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      </el-breadcrumb> -->
      <el-bread></el-bread>
      <!-- 添加按钮 -->
      <el-button @click="addDialog" class="btnInfo" type="primary" size="small" plain>添加</el-button>
      <!-- 列表展示表格 -->
      <v-list @edit="edit"></v-list>
      <!-- 显示弹框 -->
      <v-dialog ref="diaInfo" @cancel="cancel" :addInfo="addInfo"></v-dialog>
    </div>
  </template>
  
  <script>
  import vDialog from './dialog.vue';
  import vList from './list.vue';
  export default {
    data() {
      return {
        addInfo: {
          //用来控制表单显示隐藏
          isShow: false,
          isAdd: true,//添加
        }
      };
    },
    components: {
      vDialog,
      vList
    },
    methods: {
      //打开弹框的事件
      addDialog() {
        //显示弹框
        this.addInfo.isShow = true
        this.addInfo.isAdd = true
      },
      cancel(e) {
        this.addInfo.isShow = e
      },
      //打开弹框
      edit(e) {
        this.addInfo.isShow = true;
        //告诉你弹框是一个编辑
        this.addInfo.isAdd = false;
        this.$refs.diaInfo.lookup(e)
      }
    }
  };
  </script>
  
  <style scoped>
  .btnInfo {
    margin: 10px 5px;
  }
  </style>
  